<!DOCTYPE html>
<html>
<head>
    <title>台球游戏音效生成器</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f0f0f0;
        }
        .container {
            background-color: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        h1 {
            color: #333;
            text-align: center;
        }
        .button-container {
            display: flex;
            flex-direction: column;
            gap: 10px;
            margin-top: 20px;
        }
        button {
            padding: 10px 20px;
            font-size: 16px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        button:hover {
            background-color: #45a049;
        }
        .status {
            margin-top: 20px;
            padding: 10px;
            border-radius: 4px;
            background-color: #f8f9fa;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>台球游戏音效生成器</h1>
        <div class="button-container">
            <button onclick="generateHitSound()">生成碰撞音效</button>
            <button onclick="generatePocketSound()">生成进袋音效</button>
            <button onclick="generateCushionSound()">生成库边碰撞音效</button>
            <button onclick="generateWinSound()">生成胜利音效</button>
            <button onclick="generateFoulSound()">生成犯规音效</button>
            <button onclick="generateBreakSound()">生成开球音效</button>
            <button onclick="generateAllSounds()">生成所有音效</button>
        </div>
        <div class="status" id="status"></div>
    </div>

    <script type="module">
        import { SoundGenerator } from './js/generate_sounds.js';

        const generator = new SoundGenerator();
        const status = document.getElementById('status');

        window.generateHitSound = () => {
            status.textContent = '正在生成碰撞音效...';
            generator.generateHitSound();
            status.textContent = '碰撞音效生成完成！';
        };

        window.generatePocketSound = () => {
            status.textContent = '正在生成进袋音效...';
            generator.generatePocketSound();
            status.textContent = '进袋音效生成完成！';
        };

        window.generateCushionSound = () => {
            status.textContent = '正在生成库边碰撞音效...';
            generator.generateCushionSound();
            status.textContent = '库边碰撞音效生成完成！';
        };

        window.generateWinSound = () => {
            status.textContent = '正在生成胜利音效...';
            generator.generateWinSound();
            status.textContent = '胜利音效生成完成！';
        };

        window.generateFoulSound = () => {
            status.textContent = '正在生成犯规音效...';
            generator.generateFoulSound();
            status.textContent = '犯规音效生成完成！';
        };

        window.generateBreakSound = () => {
            status.textContent = '正在生成开球音效...';
            generator.generateBreakSound();
            status.textContent = '开球音效生成完成！';
        };

        window.generateAllSounds = () => {
            status.textContent = '正在生成所有音效...';
            generator.generateAllSounds();
            status.textContent = '所有音效生成完成！';
        };
    </script>
</body>
</html> 